<template>
  <div>
    <input type="number" v-model.number="count" />
    <input type="text" v-model="title" />
    <input type="number" v-model.number="a" />
  </div>
</template>

<script>
// watch监听给定的数据
import { reactive, toRefs, watch } from 'vue'

export default {
  setup() {
    // reactive在使用watch监听时，它会自动进行deep深层监听
    const state = reactive({
      count: 100,
      title: 'aaa',
      a: 100
    })

    // 监听整体
    // watch(state, (value) => {
    //   console.log('更新后', value)
    // })
    // 监听对象中的指定属性
    // watch(
    //   () => state.count,
    //   (value) => {
    //     console.log('更新后', value)
    //   }
    // )

    // 监听对象中指定的多个属性时
    watch(
      () => [state.count, state.title],
      (value) => {
        console.log('更新后', value)
      }
    )

    return {
      ...toRefs(state)
    }
  }
}
</script>

<style lang="scss" scoped></style>
